import React, { Component } from 'react'
// import { Icon } from 'antd';

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_aoxkmeugzr.js',
// });

export default class RelationCard extends Component {
    constructor(props) {
        super(props);

        this.state = {
            mouseIndex: null
        }
    }

    handleMouseOver=(index)=>{
        this.setState({
            mouseIndex: index
        });
    }

    handleMouseout=()=>{
        this.setState({
            mouseIndex: null
        });
    }

    render() {
        const { data } = this.props;
        var temp;
        if (data.id === 1) {
            temp = (
                <div style={{
                    paddingBottom: 40,
                    color: '#8c9398',
                    fontWeight: 700,
                    fontSize: 15
                }}>
                    <div style={{
                        textAlign: 'center'
                    }}>{data.decoration}</div>
                    <div style={{
                        textAlign: 'center'
                    }}>{data.decoration1}</div>
                    <div style={{
                        textAlign: 'center'
                    }}>{data.decoration2}</div>
                </div>
            )
        } else {
            temp = (
                <div style={{
                    paddingBottom: 40,
                    color: '#8c9398',
                    fontWeight: 700,
                    fontSize: 15
                }}>
                    <div style={{
                        textAlign: 'center'
                    }}>{data.decoration}</div>
                </div>
            )
        }
        return (
            <div style={{
                width: 350,
                height: (data.id === 1 ? 260 : 220),
                backgroundColor: '#fff',
                position: 'relative',
                transitionDuration: '.8s',
                top: (this.state.mouseIndex === data.id ? -30 : 0)
            }} onMouseOver={()=>this.handleMouseOver(data.id)} onMouseOut={this.handleMouseout}>
                <div style={{
                    left: '50%',
                    marginLeft: -10,
                    position: 'relative',
                    width: 20
                }}>
                    <span className={`anticon-portal ${data.iconURL}`} style={{
                        fontSize: 20,
                        paddingTop: 30,
                        paddingBottom: 20
                    }}></span>
                </div>
                <div style={{
                    textAlign: 'center',
                    fontWeight: 'bold',
                    paddingBottom: 30
                }}>{data.title}</div>
                <div style={{
                    position: 'relative',
                    left: '50%',
                    marginLeft: -20,
                    width: 40,
                    height: 5,
                    backgroundColor: '#000',
                    marginBottom: 30
                }}></div>
                {temp}
                <div style={{
                    width: 350,
                    height: 5,
                    backgroundColor: (this.state.mouseIndex === data.id ? '#000' : '#fff'),
                    opacity: (this.state.mouseIndex === data.id ? 1 : 0),
                    transitionDuration: '.8s'
                }}></div>
            </div>
        )
    }
}
